<template>
  <div class="div">
    <div class="Account">
      <van-cell is-link center style="height: 100%" @click="goMyAccount">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <img :src="userMsg.photo" height="60" width="60" alt="图片"/>
          <div class="msg">
            <span class="span">{{userMsg.name==""?"未认证":userMsg.name}}</span>
            <div>
              <span class="custom-title1" style="font-size: 12px">{{ userMsg.postCompany==null?'未认证' : userMsg.postCompany }}</span>
              <span class="custom-title2" style="font-size: 12px">{{ userMsg.phone }}</span>
            </div>
          </div>
        </template>
      </van-cell>
    </div>
    <div class="balance">
      <van-cell is-link center style="height: 100%" @click="goMyWallet">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="balance1">
            <span class="s1">余额</span>
            <span class="s2">{{ balance==null ? '0' : balance }}₱</span>
          </div>
          <div class="balance2">
            <span>今日收入:{{DailyIncome}}₱</span>
          </div>
        </template>
      </van-cell>
    </div>
    <div class="rests">
      <van-cell value="未认证/未完成/已认证" is-link center style="height: 60px" @click="toCertification">
        <template style="text-align: left">
          <van-icon name="contact-o" size="1.5rem" style="float: left;margin-right: 10px"/>
          <span>身份认证</span>
        </template>
      </van-cell>
      <van-cell id="van" is-link center style="height: 60px" @click="helpCenter" >
        <template style="text-align: left">
          <van-icon name="question-o" size="1.5rem" style="float: left;margin-right: 10px"/>
          <span>帮助中心</span>
        </template>
      </van-cell>
      <van-cell is-link center style="height: 60px" @click="customer" >
        <template style="text-align: left">
          <van-icon name="service-o" size="1.5rem" style="float: left;margin-right: 10px"/>
          <span>在线客服</span>
        </template>
      </van-cell>
      <van-cell is-link center style="height: 60px" @click="customerPhone">
        <template style="text-align: left">
          <van-icon name="phone-circle-o" size="1.5rem" style="float: left;margin-right: 10px"/>
          <span>电话客服</span>
        </template>
      </van-cell>
      <van-cell is-link center style="height: 60px" to="/setUp">
        <template style="text-align: left">
          <van-icon name="setting-o" size="1.5rem" style="float: left;margin-right: 10px"/>
          <span>设置</span>
        </template>
      </van-cell>
    </div>


    <!--    底部导航栏-->
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="wap-home-o" @click="home" >首页</van-tabbar-item>
        <van-tabbar-item name="message" to="/newsCenter" icon="chat-o" dot>消息</van-tabbar-item>
        <van-tabbar-item name="my" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      active:'',
      userMsg:{},
      DailyIncome:'0',
      balance:null,
    };
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    if(parse!=null&&parse!=''){
      let id = parse.id;
      let registerIp = parse.registerIp;
      // 查询用户信息
      axios.get('http://localhost:11219/mine/mywallet/getuserbyId/'+id).then(res=>{
        this.userMsg=res.data
        // 查询当前用户余额信息
        axios.get('http://localhost:11219/mine/mywallet/getuserdetail/'+registerIp).then(res=>{
          this.balance=res.data.accountBalance
          // 查询当前用户的今日收入
          axios.get('http://localhost:11219/mine/bill/getDailyIncome/'+this.userMsg.registerIp).then(res=>{
            console.log(res)
            if(res.data==null){
              this.DailyIncome='0'
            }else {
              this.DailyIncome = res.data
            }
          })
        })
      })
    }
  },
  methods: {
    customer(){
      this.$router.push("/customer")
    },
    customerPhone(){
      this.$router.push("/customerPhone")
    },
    helpCenter(){
      this.$router.push("/helpCenter")
    },
    // 跳转到设置页面
    setUp(){
      this.$router.push("/setup")
    },
    home(){
      this.$router.push("/home/Home")
    },
    goMyAccount(){
      this.$router.push({
        path: '/myaccount',
      });
    },
    goMyWallet(){
      this.$router.push({
        path: '/mywallet',
      });
    } ,
    toCertification(){
      this.$router.push({
        path: '/certification',
      });
    },
  }
}
</script>

<style scoped>
.Account{
  width: 100%;
  height: 120px;
  margin-top: 30px;
}
.balance{
  width: 95%;
  height: 120px;
  box-shadow:0 0 10px #c4c4c4;
  margin:10px auto;
}
.custom-title1 {
  width: 60px;
  margin-right: 4px;
}
.msg .span{
  width: 100px;
  margin-top: -3px;
  margin-bottom: 20px;
}
.Account img{
  float: left;
  margin-bottom: 10px;
}
.msg{
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.msg span{
  text-align: left;
  float: left;
  color: #6c6c6c;
  font-size: 20px;
}
.msg div{
  float: left;
  margin-top: 30px;
  margin-left: -100px;
}
.msg div span{
  font-size: 10px;
}
.balance1{
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.balance1 .s1{
  float: left;
  font-size: 15px;
  color: #6c6c6c;
}
.balance1 .s2{
  float: left;
  font-size: 30px;
  margin-top: 35px;
  margin-left: -34px;
}
.balance2{
  margin-top: 40px;
  color: #6c6c6c;
}
</style>
